<template>
	<view class="page"  style="background-image: linear-gradient(180deg, #ffc300 0%, #ffffff00 100%);"  :style="{ 'padding-top': top + 'px' }">




		<view class="flex-row section space-x-4" >
		  <view class="flex-col self-start group">
		   <view class="flex-row items-center space-x-8">
		      <yk-authpup ref="authPupYk" type="top" @changeAuth="authSuccess" :permissionID="permissionID"></yk-authpup>
		  	   <getlocation  :hasPrmissionLocation="hasPrmissionLocation"  :type="locationtype"></getlocation>
		    </view>
		    <text class="self-start text_2">宠物店铺</text>
		    <text class="font_1 text_3">5秒匹配离您最近的服务商</text>
		  </view>
		  <image
		    class="self-center image"
		    src="https://qiniu.ccchongya.com/chongya/images/16947555401294557130.png"
		  />
		</view>





		 <!-- <button @click="openAddress">打开地址选择器</button> -->
		 <!-- <liu-choose-address ref="scroll" @change='chooseSuccess'></liu-choose-address> -->



		<view class="top" style="background:#FAF5E6">
			<view class="navbar" :class="showNavFloat ? 'floatbar' : ''">
				<view class="menu" v-if="category.length > 0">
					<view class="category">
						<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="scroll_category_id" @scroll="navFloatShow()">
							<view
								class="item"
								v-for="(item, index) in category"
								:key="index"
								:class="category_id == item.id ? 'current section_4' : ''"
								:id="'category_id-' + index"
								:style="'width:' + (category.length <= 4 ? 100 / category.length + '%' : '')"
								@tap="categoryChange(item.id, index)"
							>
								<view class="text">
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>


		<view class="  " style="background:#ffffff;height:auto">
			<view class="box-c" >
<!--
				<view class="flex h-40">
					<view @click="changeSort('')" :class="sort == '' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1 ">{{i18n['综合']}}</view>
					<view @click="changeSort('sell_num desc')" :class="sort == 'sell_num desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">{{i18n['销量']}}</view>
					<view @click="changeSort('add_time desc')" :class="sort == 'add_time desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">{{i18n['新上架']}}</view>
					<view @click="changeSort('price')" :class="sort == 'price desc' || sort == 'price asc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">
						<text class="margin-r4">{{i18n['价格']}}</text>
						<view class="flex f-c f-a-c f-j-c">
							<text   :class="sort =='price asc' ? 't-color-p' : ''" class="flex f-a-c f-j-c price-up"></text>
							<text :class="sort =='price desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c price-down margin-t2"></text>
						</view>
					</view>
					<view @click="$refs.popup.open('right')" class="flex f-a-c f-j-c flex-1">
						<text class="margin-r4">{{i18n['筛选']}}</text>
						<text class="flex f-a-c f-j-c van-icon van-icon-filter-o"></text>
					</view>
				</view> -->



				<view class="flex f-a-c f-j-c flex-1 ">



							<!-- 	<view @click="changeSort('')" :class="sort == '' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1 ">
									<view style="z-index:999;background:#ffffff;height:50rpx;position: relative;"  class="flex-col f-a-c f-j-c flex-1 ">
										<view class="dropdown-trigger flex-col f-a-c f-j-c flex-1 " @tap="showDropdown" >
										  {{ selectedItem }}
										</view>
										<view class="dropdown-list flex-col f-a-c f-j-c flex-1 " v-if="showList" style="position: absolute;top:50rpx;z-index:999;background:#ffffff">
										  <view class="dropdown-item" v-for="item in listData" @tap="selectItem(item)" :key="item">
											{{ item }}
										  </view>
										</view>
									</view>
								</view> -->


								<view :class="sort == '' ? '' : ''" class="flex f-a-c f-j-c flex-1 "  @tap.stop="showDropdown" style="z-index:999;background:#ffffff;height:50rpx;position: relative;">

								  {{ selectedItem }}

										<view class="dropdown-list flex-col f-a-c f-j-c flex-1 " v-if="showList" style="width:750rpx;left:0;position: absolute;top:70rpx;z-index:999;background:#ffffff">
										  <view class="dropdown-item" v-for="item in listData" @tap.stop="selectItem(item)" :key="item">
											{{ item }}
										  </view>
										</view>


								</view>




								<!-- <view @click="changeSort('')" :class="sort == '' ? '' : ''" class="flex f-a-c f-j-c flex-1 ">{{i18n['综合']}}</view> -->
						<!-- 		<view @click="changeSort('sell_num desc')" :class="sort == 'sell_num desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">{{i18n['销量']}}</view>
								<view @click="changeSort('add_time desc')" :class="sort == 'add_time desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">{{i18n['新上架']}}</view> -->
							<!-- 	<view @click="changeSort('price')" :class="sort == 'price desc' || sort == 'price asc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">
									<text class="margin-r4">开店时间</text>
									<view class="flex f-c f-a-c f-j-c">
										<text   :class="sort =='price asc' ? 't-color-p' : ''" class="flex f-a-c f-j-c price-up"></text>
										<text :class="sort =='price desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c price-down margin-t2"></text>
									</view>
								</view> -->
							<!-- 	<view @click="$refs.popup.open('right')" class="flex f-a-c f-j-c flex-1">
									<text class="margin-r4">{{i18n['筛选']}}</text>
									<text class="flex f-a-c f-j-c van-icon van-icon-filter-o"></text>
								</view> -->
				</view>


			</view>





			<!-- <view  :style="{ 'padding-top': top +84+ 'px' }"></view> -->
			<view class="padding-lr10">
				<!-- <goodslist class="margin-t12" :sortType="sortType" :list="list"></goodslist> -->
				<view class="" style="">
						<!-- <scroller @init="initScroller" @down="refreshData" @up="getList" :up="optUp" @scroll="navFloatShow(scroller)" :fixed="false"> -->
						 <!--   <swiper v-if="banners.length > 0" class="swiper" :indicator-dots="true" :autoplay="true" :circular="true">
									<swiper-item v-for="(item, index) in banners" :key="index">
										<navigator class="item" hover-class="none" :url="'/pages/article/detail?id=' + item.jump_link">
											<image :lazy-load="true" :src="item.cover" mode="aspectFill"></image>
											<view class="title">
												<text>{{ item.title }}</text>
											</view>
										</navigator>
									</swiper-item>
							</swiper> -->
							<!-- <article_list :list="articles" /> -->
										<view class="flex-col list space-y-12" style="padding:0">


											<view class="flex-row list-item_1"  v-for="(item, index) in list" :key="index"  @click="go('/pages/shops/shops?id='+item.id)" >
											  <image  class="shrink-0 image_4" :src="item.cover"/>
											  <view class="flex-col flex-auto self-start group_1 space-y-8">
												<text class="self-start font_1">{{item.name}}</text>
												<text class="font_4">{{item.address}}</text>
											    <view class="flex-row" style="margin-top:0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
">
											     <view style="width: 49%;
	margin-top: 10px;" class="flex-row group_6 space-x-4" v-for="(itemm,indexx) in item.goodsCates" :key="indexx">

											       <view  v-if="itemm" class="flex-col justify-start items-center" :class="'text-wrapper_'+(indexx+7)"><text class="font_cate_text">{{itemm.name}}</text></view>

											     </view>
											    </view>
											  </view>
											  <view class="flex-col shrink-0 view space-y-36">
											     <text class="font_3">距离： {{getdistance(item.longitude,item.latitude)}}</text>
											    <view class="flex-col justify-start items-center text-wrapper_1"><text class="font_6">进入店铺</text></view>
											  </view>
											</view>




										</view>




						<!-- </scroller> -->
				</view>
			</view>
			<no-data v-if="list.length <= 0"></no-data>
			<view class="padding-10"></view>




	<uni-popup ref="popup" type="right" background-color="#fff">
			<view class="h100 bg-color-w wrap-filter-popup" style="width: 70vw;">
				<scroll-view scroll-y="true" :style="{'height': height+'px'}">
					<view :style="{ 'padding-top': top+44 + 'px' }"></view>
					<view class="padding-10 b-bottom">
						<view class="flex f-a-c f-j-s">
							<text class="f12-size t-color-6">{{i18n['价格区间']}}</text>
						</view>
						<view class="flex margin-t15">
							<view class="flex flex-1 b-radius-30 bg-color-f7 h-30">
								<input v-model="min" class="f12-size input w100 h100" type="number" :placeholder="i18n['最低价']">
							</view>
							<view class="flex f-s-0 f-a-c f-j-c t-color-9 padding-lr15"><text class="b-bottom w-30"></text></view>
							<view class="flex flex-1 b-radius-30 bg-color-f7 h-30">
								<input v-model="max" class="f12-size input w100 h100" type="number" :placeholder="i18n['最高价']">
							</view>
						</view>
					</view>
					<view class="padding-10 b-bottom">
						<view class="flex f-a-c f-j-s">
							<text class="f12-size t-color-6">{{i18n['发货地']}}</text>

							<text @click="provinceShow= !provinceShow" :class="provinceShow ? 'van-icon-arrow-up':'van-icon-arrow-down'" class="flex f-a-c f-j-c van-icon  t-color-9 f15-size"></text>
						</view>
						<view class="grid grid-c-3 grid-g10 margin-t10">
							<!-- <view  class="flex f-a-c f-j-c padding-lr2 h-34 b-radius-2 bg-color-f7 f12-size t-color-6">{{i18n['定位中']}}</view> -->

							{{chooseAddressinfo.address}}
							   <!-- <getlocation ></getlocation> -->
						</view>
						<block v-if="provinceShow">
						<view class="flex f-a-c f-j-s margin-t10">
							<text class="f12-size t-color-6">{{i18n['城市']}}</text>
						</view>
						<view class="grid grid-c-3 grid-g10 margin-t10">

							<view @click="chooseProvince(key)" v-for="(item,key) in provinceList" :class="province == key ? 'on t-color-y' : 'bg-color-f7 t-color-6'" class="flex f-a-c f-j-c padding-lr2 h-34 b-radius-2  f12-size ">{{item}}</view>
						</view>
						</block>
					</view>
				</scroll-view>
				<view class="flex f-a-c f-j-e padding-lr10 h-60">
					<view class="flex w-160 b-radius-30 h-36 over-h">
						<view @click="reset" class="flex flex-1 f-a-c f-j-c bg-color-linear-y t-color-w">{{i18n['重置']}}</view>
						<view @click="seach()" class="flex flex-1 f-a-c f-j-c bg-color-p t-color-w">{{i18n['确定']}}</view>
					</view>
				</view>
			</view>
		</uni-popup>

		</view>

			<tab-bar ref="tabbar" :showLogin="true" :active="1" :isShow="false"></tab-bar>

		</view>
		</view>








	</view>
</template>

<script>

import scroller from '@/components/shops/components/scroller/scroller.vue';
import article_list from '@/components/shops/components/article/list.vue';
import pageLoading from '@/components/shops/components/loading/pageLoading.vue';
// import iconfont from '@/components/iconfont/iconfont.vue';
// import util from '@/common/util.js';

// import {adList,articleCate, articleList} from '@/api/article';
// const API = require('@/utils/api/shops.js').default;
const $ = require('@/utils/api.js');
import shopApi from '../../utils/api/admin.js';
const address = require('@/utils/address.js').default;

// import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
// import popupLayer from '@/components/popup-layer/popup-layer.vue';


import getlocation from '@/components/getlocation/index.vue';

let self;


export default {
	components: {
		getlocation,
		article_list,
		pageLoading,
		scroller,
		// iconfont
		// citySelect,
		// popupLayer
	},
	data() {
		return {
			hasPrmissionLocation:false,
			permissionID:'ACCESS_FINE_LOCATION',
			showList: false, // 控制下拉列表的显示和隐藏
			listData: ['综合排序', '离我最近'], // 下拉列表的数据
			selectedItem: '综合排序' ,// 选中的下拉列表



			locationtype:2,
			statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
			region: '请选择...', //地区



			top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
			isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
			sortType: 1,
			height: 0,
			list: [],
			page: 1,
			pageSize: 20,
			totalPage: 1,
			title: '',
			shopId: '',
			catePid: '',
			cateTid: '',
			cateId: '',
			shopCateId: '',
			type: '',
			sort: '',
			provinceList: address.province_list,
			provinceShow: false,
			province: '',
			max: '',
			min: '',
			spread: '',
			cateName: '',
			chooseAddressinfo:{},


			list: [],
			keyword:'',
			scroller: {},
			optUp: { auto: true, onScroll: true, page: { size: 10 }, empty: { tip: '暂无文章~' } },
			category_id: 0,
			category_id_change:false,
			category_index: 0,
			scroll_category_id: 'scroll_category_id_0',
			currentSliderIndex: 0,
			category: [],
			showMenu: false,
			banners: [],
			articles: [],
			showNoData: false,
			showPageLoading: true,
			showNavFloat: false,
			navBarHeight: '',
			loadingType: 'more',
			page:0,
			userInfo: {},
			loading: true
		};
	},
	filters: {
		time(val) {
			return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
		},
		numFilter(val) {
			return val >= 0 ? `+${val.toString()}` : val;
		},
		getFinallPrice(price) {
			return price.toFixed(2);
		}
	},
	mounted() {
		// this.$refs.popupRef.close();
	},
	computed: {
		i18n() {
			return this.$t('search')
		},
		finalMoney() {//实时监听总价变化，用于购物车中
		    let finalMoney = 0;
		    for (let item of this.list) {
		        finalMoney += item.price;
		    }
		    return finalMoney;
		},
		 getdistance()
		    {
		      return (longitude,latitude)=>{

							// console.log('经度：' + longitude);
							// console.log('纬度：' + latitude);


							// uni.getStorageSync('orderData',postData);
							// uni.setStorageSync('orderCarIds',carIds);

							let  distance  =   this.mapfun.getDistance(longitude,latitude,longitude,latitude)
							// console.log('结果：' + distance);

							return distance;
		      }
		    }
	},
	// onShareAppMessage() {
	// 	return {
	// 		path: '/pages/article/index',
	// 		success: function(e) {},
	// 		title: '未来迹'
	// 	};
	// },
	onLoad(options) {

		self = this;
		let height = getApp().globalData.height;
		height = height-60;
		if(this.isIphonex) {
		height-=34;
		}
		this.height = height;
		this.title = options.title ? options.title : '';
		this.catePid = options.catePid ? options.catePid : '';
		this.cateTid = options.cateTid ? options.cateTid : '';
		this.cateId = options.cateId ? options.cateId : '';
		this.shopId = options.shopId ? options.shopId : '';
		this.type = options.type ? options.type : '';
		this.spread = options.spread ? options.spread : '';
		this.cateName = options.cateName ? options.cateName : '';



		this.getList();



	},
	onShow(){
	   // this.getList();
	},
	onPullDownRefresh() {},
	onReachBottom() {
		if(this.page < this.totalPage) {
			this.page += 1;
			// this.loadData();
				this.getList();
		}

		// if (this.loadingType === 'nomore') return;

	},
	onPullDownRefresh() {
		uni.showLoading({
			title: '刷新中'
		});
				this.getList();
	},


	methods: {
		// //这个是自己的方法名
		openAuthYk(permissionID){
			setTimeout(()=>{
			    self.permissionID = permissionID;
				self.$refs.authPupYk.open();
			},1000)
		},
		//权限获取后的回调函数
		authSuccess(permissionID){

			if(	permissionID =="ACCESS_FINE_LOCATION"){
									this.hasPrmissionLocation = true;
			}

		},
		    showDropdown() {
					  console.log("showDropdown")
					  this.showList = this.showList?false:true; // 切换下拉列表的显示状态
					  console.log("this.showList",this.showList)
		    },
		    selectItem(item) {

				  console.log("selectedItem",item)
				  this.selectedItem = item; // 选择下拉列表项
				  this.showList = false; // 隐藏下拉列表


				  if(item == '离我最近'){
					this.sort_district = 'district asc';
				  }else{
					this.sort_district = '' ;
				  }
				  this.page = 1;
				  this.getList();


		    },
	  //打开地址选择器
	        openAddress() {
	            this.$refs.scroll.open()
	        },
	        //地址选择成功
	        chooseSuccess(e) {
	            console.log('所选择的地址信息:', e)
	        },

			// oncity() {
			// 	console.log("111111111111111")
			// 	var that = this
			// 	// this.$refs.popupRef.show();
			// },
			// back_city(e) {
			// 	// if (e !== 'no') {
			// 	// 	this.region = e.cityName
			// 	// 	this.$refs.popupRef.close();
			// 	// } else {
			// 	// 	this.$refs.popupRef.close();
			// 	// }
			// },
			clear() {
				this.title = '';
				this.cateName = '';
				this.catePid ='';
				this.cateTid = '';
				this.cateId ='';
				this.shopCateId = '';
				this.page = 1;
				this.getList();
			},
			reset() {
				this.province = '';
				this.max = '';
				this.min = '';
			},
			seach() {
				this.page = 1;
				this.getList();
				// this.$refs.popup.close();
			},
			chooseProvince(item) {
				if(this.province == item) {
					this.province = '';
				}else{
					this.province = item;
				}
			},
			changeSort(type) {
				if(type == 'price'){
					this.sort = this.sort == 'price desc' ? 'price asc' : 'price desc';
				}else{
					this.sort = type;
				}
				this.page = 1;
				this.getList();
			},


		goTab(route) {
			if (!route) return;
				this.$mRouter.switchTab({ route });

		},

		/*初始化滚动*/
		initScroller(scroller) {
			this.scroller = scroller;
		},
		/*刷新数据*/
		refreshData() {
			console.log("refreshData");
			uni.showLoading({
				title: '刷新中'
			});
			this.scroller.resetUpScroll();
		},
		/*加载数据*/
		loadData() {
			this.slider = [];
			this.list = [];
			this.currentSliderIndex = 0;
			this.page=0;
			if(typeof(this.scroller.resetUpScroll)=='function'){
			    this.scroller.resetUpScroll();
			}
		},

		/*获取子类别数据*/
		getCategory() {

			const params = {};
			params.id = this.id;
				$.ajax({
					url: shopApi.goodsCateApi,
					data: {
						type: 2,//1普通>>2服务
						sort: self.sort,
						status: '',
						page: self.page,
						pageSize: self.pageSize,
						// spreadStatus: self.isSpread ? '1' : '',
					},
					method: 'GET',
					success(res) {
						self.category  =  res.data;
						// console.log(self.category)

						self.category_id = self.category[0].id
						// console.log(self.category_id)
						self.getList()
					}
				})

		},

		/*获取数据*/
		getList() {
			// // this.keyword = uni.getStorageSync('article_keyword');
			// // console.log("keyword", this.category_id)
			// if(!this.category_id ||  this.category_id==0 ) return


			let chooseAddressinfo	 = 	uni.getStorageSync('chooseAddressinfo');
			let	currentAddressinfo	 =  uni.getStorageSync('currentAddressinfo');
			if(!chooseAddressinfo){
				chooseAddressinfo = currentAddressinfo
				uni.setStorageSync('chooseAddressinfo',chooseAddressinfo);

			}

			$.ajax({
				url: shopApi.shopListWithCateByCateId,
				data: {
					// cateId: this.category_id,
	                latitude: chooseAddressinfo.latitude,
			        longitude: chooseAddressinfo.longitude,
					name: self.name,
					province: self.province,
					type: self.type,//1普通商品>>2秒杀商品>>3拼团商品
					sort: self.sort,
					sort_district: self.sort_district,
					status: '',
					minAmount: self.min,
					maxAmount: self.max,
					provinceCode: self.province,

					name:self.name,

					page: self.page,
					pageSize: self.pageSize,
					spreadStatus: self.spread != '' ? '1' : '',



					// page: self.page,
					// pageSize: self.pageSize,
					// spreadStatus: self.isSpread ? '1' : '',
				},
				method: 'GET',
				success(res) {
						// console.log(res)
					let list = [];
					if (self.page != 1) {
						list = self.list.concat(res.data.list);
					} else {
						list = res.data.list ? res.data.list : [];
					}
					self.totalPage = res.data.totalPage;
					self.list  = list;
					// console.log(self.list )
//
					self.loading = false;
					self.loadingType = res.data.list.length === 10 ? 'more' : 'nomore';


					self.showPageLoading = false;

					if(self.loadingType=='more'){
							self.scroller.endSuccess(res.data.list.length,true);
					}else{
							// self.scroller.showNoMore();
					}


				}
			})
		},

		/*切换导航*/
		categoryChange(category_id, index) {
			this.showMenu = false;
			this.category_index = index;
			this.category_id = category_id;


			var nextIndex = index - 1;
			nextIndex = nextIndex <= 0 ? 0 : nextIndex;
			this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
			this.loadData();

			// #ifdef H5
			// uni.navigateTo({
			// 	url: '/pages/article/list?category_id=' + this.category_id + '&category_index=' + this.category_index
			// });
			// #endif
		},

		/*广告切换*/
		sliderChange: function(e) {
			this.currentSliderIndex = e.detail.current;
		},

		/*滚动时导航栏浮动*/
		navFloatShow(scroller) {
			if (scroller) {
				if (scroller.scrollTop > 60) {
					if (!this.showNavFloat) {
						this.showNavFloat = true;
					}
				} else {
					if (this.showNavFloat) {
						this.showNavFloat = false;
					}
				}
			}
		},
		/*菜单框展示*/
		menuShow(value) {
			this.showMenu = value;
		},
		/*隐藏导航浮动*/
		navFloatHide() {
			this.showNavFloat = false;
		}
	}
};
</script>
<style scoped>
	@import url('../../static/css/search/list.css');
</style>
<style scoped lang="scss">
page {

}
.page {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;

}
.content {
	flex: 1;
	width: 100%;

}

/*头部*/
.top {
	/*页面标题*/
	.page-title {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		text-align: center;
		border-bottom: 1rpx solid #efefef;
		z-index: 9999;
		line-height: 1;
		image {
			height: 50rpx;
			width: 280rpx;
			margin-left: -35rpx;
		}
	}

	/*搜索*/
	.search {
		padding: 24rpx 24rpx 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.logo {
			height: 60rpx;
			width: 474rpx;
			margin-right: 30rpx;
		}
		.input {
			margin-left: 0 !important;
			display: flex;
			align-items: center;
			height: 70rpx;
			width: 100%;
			background: #f5f5f5;
			border-radius: 34rpx 34rpx 0 34rpx;
			::v-deep .icon {
				margin-left: 28rpx;
				color: #aaaaaa;
				font-size: 32rpx;
				line-height: 1;
			}
			text {
				margin-left: 14rpx;
				font-size: 30rpx;
				color: #aaaaaa;
				line-height: 1;
			}
		}
		.user{
			display: flex;
			align-items: center;
			::v-deep .icon {
				margin-left: 24rpx;
				color: #aaaaaa;
				font-size: 38rpx;
				margin-top: 4rpx;
			}
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-left: 25rpx;
			}
		}
	}

	/* 顶部navbar */
	.navbar {
		// width: 80%;
	 //    padding:0 20rpx;
		/*分类*/
		.menu {
			// padding:20rpx;
		     // width: 100%;
			// position: relative;
			// height: 60rpx;
			// white-space: nowrap;
			// padding: 15rpx 0 6rpx;
			z-index: 10;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			text-align: center;
			/*分类*/
			.category {
				width: 720rpx;
				margin-left: 15rpx;
				// border:1px solid #ff0000;
				// width: 90%;
				// margin:0 auto;
				white-space: nowrap;
				// position: relative;
				scroll-view {
					width: 100%;
					.item {
						position: relative;
						display: inline-block;
						margin: 0 31rpx 0;
						height: 40rpx;
						line-height: 40rpx;
						text-align: left;
						padding:  0;
						margin:20rpx 30rpx;
						//line-height: 80rpx;
						&:first-child {
							margin-left: 10rpx;
						}
						&:after {
							content: '';
							width: 0;
							height: 0;
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
							transition: 0.3s;
						}
						.text {
							position: relative;
							width: auto;
							height: auto;
							line-height: auto;
							display: inline-block;
							text {
								// font-size: 32rpx;
								// font-weight: bold;
								color: #555;
							}
							image {
								position: absolute;
								top: 16rpx;
								right: -14rpx;
								width: 50rpx;
								height: 50rpx;
								display: none;
							}
						}
					}
					// .current {
					// 	&:after {
					// 		width: 50%;
					// 	}
					// 	.text {
					// 		text {
					// 			font-size: 40rpx;
					// 			font-weight: bold;
					// 			color: #262626;
					// 		}
					// 		image {
					// 			display: block;
					// 		}
					// 		border-bottom: 6rpx solid #3869E6;
					// 	}
					// }
				}
			}
			.list {
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				//box-shadow: -4rpx 0 0 #e9ebee;
				//box-shadow: -2px 0 0 #262626;
				::v-deep .icon {
					font-size: 36rpx;
					margin-top: -6rpx;
				}
			}
		}
	}
}
.menu-block {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	border-bottom: 1rpx solid #f5f5f5;
	padding: 20rpx 0 50rpx;
	z-index: 100;
	width: 100%;
	//box-shadow: 0 15rpx 10rpx -15rpx #e9ebee;
	.list {
		padding-left: 10rpx;
		text {
			background: #f5f7fa;
			border-radius: 8rpx;
			font-size: 32rpx;
			margin: 12rpx 20rpx;
			display: inline-block;
			height: 72rpx;
			width: 144rpx;
			line-height: 72rpx;
			text-align: center;
		}
		.current {
			color: #fff;
			background: #3869E6;
			//font-size: 32rpx;
		}
	}
}

.scroll {
	height: 100%;
}

/*幻灯片广告 */
.swiper {
	height: 350rpx;
	margin: 14rpx 24rpx 0;
	image {
		height: 350rpx;
		width: 100%;
		border-radius: 15rpx;
		//box-shadow: 0 0 12px #dddee1;
	}
	.current {
		width: 97%;
		height: 350rpx;
		margin: 1.5% 1.5%;
		transition: all 0.2s ease-in 0s;
	}
	.item {
		position: relative;
		.title {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			text {
				margin: 7% 6%;
				display: flex;
				align-items: center;
				//background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
				//background-image: linear-gradient(90deg,rgba(255, 181, 19,.8),rgba(255, 181, 19,.2));
				color: #fff;
				display: -webkit-box;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				font-size: 34rpx;
				padding: 14rpx 20rpx;
				max-width: 610rpx;
				line-height: 1.3;
				border-radius: 5rpx;
			}
		}
	}
}

/*浮动navbar*/
.floatbar {
	//border-bottom: 1rpx solid #e8e8e8;
	box-shadow: 0px 2px 2px -2px #e8e8e8;
	padding-bottom: 12rpx;
}

::v-deep .no-data {
	margin-top: 200rpx;
}


	.section {
		position: relative;
	  padding: 44rpx 0 0 20rpx;
	  background-image: linear-gradient(180deg, #ffc300 0%, #ffffff00 100%);
	  overflow: hidden;
	  height:280rpx;
	}
	.group {
	  flex: 1 1 361rpx;
	}
	.space-x-8 > view:not(:first-child),
	.space-x-8 > text:not(:first-child),
	.space-x-8 > image:not(:first-child) {
	  margin-left: 16rpx;
	}
	.image_2 {
	  width: 38rpx;
	  height: 38rpx;
	}
	.text {
	  color: #081329;
	  font-size: 24rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 23rpx;
	}
	.text_2 {
	  margin-top: 40rpx;
	  color: #000000;
	  font-size: 46rpx;
	  line-height: 43rpx;
	}
	.font_1 {
	  font-size: 28rpx;
	  line-height: 26rpx;
	  color: #081329;
	}
	.text_3 {
	  margin-left: 8rpx;
	  margin-top: 20rpx;
	  color: #000000;
	  font-size: 29rpx;
	  line-height: 27rpx;
	}
	.image {
		margin-top:50px;
	  flex: 1 1 361rpx;
	  width: 359rpx;
	  height: 360rpx;
	}
	.space-x-4 > view:not(:first-child),
	.space-x-4 > text:not(:first-child),
	.space-x-4 > image:not(:first-child) {
	  margin-left: 8rpx;
	}

.section_4 {
  background-image: linear-gradient(90deg, #ffc300 0%, #cccccc00 100%);
  height: 18rpx;
}


.equal-division {
  margin-right: 16rpx;
}
.equal-division-item {
  padding: 16rpx 20rpx;
  background-color: #ffffff;
  border-radius: 308rpx;
  height: 56rpx;
}
.space-x-34 > view:not(:first-child),
.space-x-34 > text:not(:first-child),
.space-x-34 > image:not(:first-child) {
  margin-left: 68rpx;
}
.font_2 {
  font-size: 24rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 22rpx;
  color: #636363;
}
.image_3 {
  width: 24rpx;
  height: 24rpx;
}



	.font_cate_text {
	  font-size: 28rpx;
	  line-height: 26rpx;
	  /* color: #081329; */

	  padding: 12rpx;
	  /* background-color: #43cf7c1a; */
	  border-radius: 4rpx;
	}

	.text-wrapper_7 {
	  background-color: #43cf7c1a;
	  	  color:#43cf7c
	}

	.text-wrapper_8 {
	  background-color: #42cccf1a;
	  	  color:#42cccf
	}

	.text-wrapper_9 {
	  background-color: #FAF2EC;
	  color:#cf7d42
	}




	.pos {
	  position: absolute;
	  left: 0;
	  right: 3rpx;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.text_4 {
	  margin-right: 36rpx;
	}
	.group_3 {
	  padding: 22rpx 16rpx 0;
	}
	.equal-division {
	  margin-right: 16rpx;
	}
	.equal-division-item {
	  padding: 16rpx 20rpx;
	  background-color: #ffffff;
	  border-radius: 308rpx;
	  height: 56rpx;
	}
	.space-x-34 > view:not(:first-child),
	.space-x-34 > text:not(:first-child),
	.space-x-34 > image:not(:first-child) {
	  margin-left: 68rpx;
	}
	.font_2 {
	  font-size: 24rpx;
	  font-family: AlibabaPuHuiTi;
	  line-height: 22rpx;
	  color: #636363;
	}
	.image_3 {
	  width: 24rpx;
	  height: 24rpx;
	}
	.list {
	  margin-top: 22rpx;
	  padding-left: 6rpx;
	}
	.space-y-12 > view:not(:first-child),
	.space-y-12 > text:not(:first-child),
	.space-y-12 > image:not(:first-child) {
	  margin-top: 24rpx;
	}
	.list-item_1 {
	  background-color: #ffffff;
	  border-bottom: solid 1rpx #0000000d;
	}
	.image_4 {
	  width: 276rpx;
	  height: 186rpx;
	}
	.group_1 {
	  margin-left: 24rpx;
	  margin-top: 12rpx;
	}
	.font_4 {
	  font-size: 20rpx;
	  line-height: 26rpx;
	  color: #666e7a;
	}
	.group_6 {
	  padding-bottom: 8rpx;
	}
	.space-x-4 > view:not(:first-child),
	.space-x-4 > text:not(:first-child),
	.space-x-4 > image:not(:first-child) {
	  margin-left: 8rpx;
	}
	.text-wrapper {
	  padding: 12rpx 0;
	  background-color: #43cf7c1a;
	  width: 104rpx;
	  height: 40rpx;
	}
	.font_3 {
	  font-size: 20rpx;
	  line-height: 19rpx;
	  color: #43cf7c;
	}
	.text-wrapper_2 {
	  padding: 12rpx 0;
	  background-color: #42cccf1a;
	  width: 104rpx;
	  height: 40rpx;
	}
	.font_5 {
	  font-size: 20rpx;
	  line-height: 19rpx;
	  color: #42cccf;
	}
	.text-wrapper_4 {
	  padding: 12rpx 0;
	  background-color: #cf7d421a;
	  width: 104rpx;
	}
	.font_7 {
	  font-size: 20rpx;
	  line-height: 19rpx;
	  color: #cf7d42;
	}
	.view {
	  margin-left: 36rpx;
	  margin-right: 4rpx;
	  padding: 16rpx 0 44rpx;
	}
	.text-wrapper_1 {
	  margin-right: 4rpx;
	  padding: 16rpx 0;
	  background-color: #ffbd52;
	  width: 126rpx;
	}
	.font_6 {
	  font-size: 24rpx;
	  line-height: 22rpx;
	  color: #ffffff;
	}
	.space-y-8 > view:not(:first-child),
	.space-y-8 > text:not(:first-child),
	.space-y-8 > image:not(:first-child) {
	  margin-top: 16rpx;
	}
	.space-y-36 > view:not(:first-child),
	.space-y-36 > text:not(:first-child),
	.space-y-36 > image:not(:first-child) {
	  margin-top: 72rpx;
	}
	.equal-division_2 {
	  margin-top: 14rpx;
	}
	.section_5 {
	  padding: 24rpx 0;
	  background-color: #ffffff;
	  overflow: hidden;
	}
	.group_7 {
	  flex: 1 1 150rpx;
	}
	.equal-division-item_2 {
	  padding: 12rpx 0;
	}
	.space-y-4 > view:not(:first-child),
	.space-y-4 > text:not(:first-child),
	.space-y-4 > image:not(:first-child) {
	  margin-top: 8rpx;
	}
	.image_5 {
	  width: 48rpx;
	  height: 48rpx;
	}
	.font_8 {
	  font-size: 20rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 19rpx;
	  color: #666e7a;
	}
	.text_5 {
	  color: #ffbd52;
	  line-height: 18rpx;
	}
	.text_6 {
	  line-height: 18rpx;
	}
	.text_7 {
	  line-height: 18rpx;
	}
	.text_8 {
	  line-height: 18rpx;
	}
	.text_9 {
	  line-height: 18rpx;
	}
</style>

<style>
	.dropdown-trigger{
		/* border:1px solid black; */
		width: 250rpx;
	}
	.dropdown-list{
		/* border:1px solid black; */
		width: 250rpx;
	}
	.dropdown-list .dropdown-item{
		line-height: 50rpx;
	}
</style>
